<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>硬件管理</el-breadcrumb-item>
                <el-breadcrumb-item>硬件信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="imei" prop="imei">
                  <el-input v-model="ruleForm.imei" disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime">
                  <div class="show-box">{{ruleForm.createTime|filterDate}}</div>
                </el-form-item>
                <el-form-item label="在线状态" prop="active">
                  <div class="show-box">{{ruleForm.active|filterActive}}</div>
                </el-form-item>
                <el-form-item label="所属代理商" prop="agentName">
                  <el-input v-model="ruleForm.agentName" disabled></el-input>
                </el-form-item>
                <el-form-item label="所属商户" prop="merchantName">
                  <el-input v-model="ruleForm.merchantName" disabled></el-input>
                </el-form-item>
                <el-form-item label="设备情况" prop="status">
                  <div class="show-box">{{ruleForm.status|filterStatus}}</div>
                </el-form-item>
                <el-form-item label="最近一笔订单" prop="lastTradeId">
                  <el-input v-model="ruleForm.lastTradeId"></el-input>
                </el-form-item>
                <el-form-item label="最后交易日" prop="lastTradeYmd">
                  <el-input v-model="ruleForm.lastTradeYmd"></el-input>
                </el-form-item>
                <el-form-item label="更新时间" prop="updateTime">
                  <el-input v-model="ruleForm.updateTime"></el-input>
                </el-form-item>
                <div class="qr-code-large">
                  <img :src="imgPath + ruleForm.qrFileName"/>
                </div>
                <div class="btn-ruleForm">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    import BW from '../../../assets/scripts/common/bwCommon'

    export default {
        name: 'baseform',
        data() {
          return {
            merList: [], // 商户列表
            agentList: [],    // 代理商列表
            isCantEdit: true,
            ruleForm: {
              imei: '',
              agentId:'',
            },
            rules: {
            },
            imgPath: `${WEBCONFIG.SOURCE_HOST_PROD}/device/`
          }
        },
        mounted() {
          this.resetForm()
          this.isCantEdit = this.$route.query.action === 'query'
          if(this.$route.query.action === 'edit' || this.$route.query.action === 'query'){
            this.getDetailData(this.$route.query.id);
          }
        },
        methods: {
          async getDetailData(id) {
            if (process.env.NODE_ENV === 'development') {
                this.imgPath = `${WEBCONFIG.SOURCE_HOST}/device/`
            };
            let res = await this.request('hardwareDetail', {
              imei: id
            }, 'get');
            this.ruleForm = res.data;
          },
          submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
              if (valid) {
                await this.request('hardwareEdit', this.ruleForm);
                this.$router.push('/hardwareList');
                BW.Toast('修改成功!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm() {
            this.$refs.ruleForm.resetFields();
          },

        }
    }
</script>
<style scoped>
    .btn-ruleForm {
      margin-top: 50px;
      text-align: center;
    }
    .pr15{
      padding-right: 15px;
    }

    .show-box{
      padding:0 15px;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
    }

    .qr-code-large{
      text-align: center;
    }

    .qr-code-large img{
      width: 200px;
      height: 200px;
    }
</style>
